<template>
	<div>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>分类列表</span>
			</div>
			<!-- <el-tree :data="data" :props="defaultProps"></el-tree> -->
			<el-tree :props="defaultProps" ref="tree" lazy :load="loadNode" node-key="id" :default-expanded-keys="[1]">
				<div class="custom-tree-node" slot-scope="{ node, data }">
					<div>{{ node.label }}</div>
					<span>
						<el-button type="text" :disabled="data.id === 0" size="mini" @click="openEditDialog(node, data)"
							icon="el-icon-edit" @click.stop="openEditDialog(node,data)">
							编辑
						</el-button>
						<el-button type="text" size="mini" @click.stop="openAddDialog(node,data)"
							icon="el-icon-circle-plus-outline">
							添加
						</el-button>
						<el-button type="text" size="mini" :disabled="data.id === 0"
							@click.stop="handleRemove(node,data)" icon="el-icon-delete">
							删除
						</el-button>
					</span>
				</div>


			</el-tree>
		</el-card>
		<!-- 添加分类 -->
		<el-dialog title="添加分类" :visible.sync="addDialogVisible" @close='handleDialogClose("addForm")'>
			<el-form :model="addForm" label-width="80px" ref="addForm" :rules='rules'>
				<el-form-item label="分类名称" prop='name'>
					<el-input v-model="addForm.name"></el-input>
				</el-form-item>
				<single-upload :src.sync="addForm.img" upload-action='/api/upload/common' remove-action='/api/upload'
					:headers='header' :data="{type:'common'}" class="categoryImg">
				</single-upload>
			</el-form>
			<div slot="footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleAdd">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 编辑分类 -->
		<el-dialog title="编辑分类" :visible.sync="editDialogVisible" @close='handleDialogClose("editForm")'>
			<el-form :model="editForm" label-width="80px" ref="editForm" :rules='rules'>
				<el-form-item label="分类名称" prop='name'>
					<el-input v-model="editForm.name"></el-input>
					<single-upload :src.sync="editForm.img" upload-action='/api/upload/common'
						remove-action='/api/upload' :headers='header' :data="{type:'common'}" class="categoryImg">
					</single-upload>
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleEdit">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { Goods, Upload } from '@/api/';
	import SingleUpload from '../../components/SingleUpload.vue';
	export default {
		components: {
			SingleUpload,
			
		},

		data() {
			return {
				header: {
					Authorization: `Bearer ${sessionStorage.token}`,
				},
				data: [],
				addForm: {
					name: '',
					pId: '',
					img: '',
				},
				addDialogVisible: false,
				node: {}, //当前操作节点的node对象
				tableData: [],
				defaultProps: {
					label: 'name',
				},
				editForm: {
					id: '',
					name: '',
					pId: '',
					img: '',
				},
				editDialogVisible: false,
				rules: {
					name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
				}


			};

		},

		methods: {

			handleAdd() {
				this.$refs.addForm.validate(async (valid) => {
					if (valid) {
						let { status, msg, data } = await Goods.insert({ ...this.addForm });
						console.log(status)
						if (status) {
							this.$message.success(msg);
							//插入子节点
							this.$refs.tree.append({ ...this.addForm, ...data }, this.node);
							this.addDialogVisible = false;
							this.addForm = {
								name: '',
								pId: '',
							}
						} else {
							this.$message.error(msg);
						}
					}

				})
			},

			handleDialogClose(form) {
				this.$refs. [form].clearValidate();
			},
			openAddDialog(node, data) {
				//缓存父级node
				this.node = node;
				//父级id
				this.addForm.pId = data.id;

				this.addDialogVisible = true;
			},
			openEditDialog(node, data) {
				//还原表单
				this.node = node;
				this.editForm = { ...data };

				this.editDialogVisible = true;
			},
			handleEdit() {
				this.$refs.editForm.validate(async (valid) => {
					if (valid) {
						let { status, msg, data } = await Goods.update({ ...this.editForm });
						console.log(data);
						if (status) {
							this.$message.success(msg);
							//更新节点
							this.node.data = this.editForm;

							//关闭弹窗户
							this.editDialogVisible = false;
						} else {
							this.$message.error(msg);
						}
					}

				})
			},
			handleRemove(node, data) {
				let { id } = data;
				this.$confirm('此操作将永久删除分类，是否继续', { type: 'warning' })
					.then(async () => {
						let { status, msg } = await Goods.cancel({ id })
						if (status) {
							//删除节点
							this.$refs.tree.remove(node);
							this.$message.success(msg);
						} else {
							this.$message.error(msg);
						}
					})
					.catch(() => {
						this.$message.info('取消成功')
					})
			},
			//(节点对象,生成新节点的函数)
			async loadNode(node, resolve) {
				if (node.level === 0) {
					return resolve([{ id: 1, name: '全部分类' }]);
				}
				//获取父级分类的id

				let { id } = node.data
				let { status, data } = await Goods.subcate({ pId: id });
				if (status) {
					resolve(data);
				}


			},

		},
	}
</script>

<style lang="less" scoped>
	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}

	.categoryImg {
		margin-top: 30px;
	}
</style>
